<template>
	<view>
		<u-popup v-model="props.show" mode=center border-radius="10" @close="handleClosePop">
			<view class="content">
				<view class="top-box">
					<view class="title-box">
						<view class="title">{{props.title}}</view>
						<view class="close" @click="handleClosePop">
							<u-icon name="close-circle" color="#272535" size="28"></u-icon>
						</view>
					</view>
				</view>
				<view class="content-main">
					<view class="content-one">{{props.content}}</view>
					<view class="content-desc">{{props.contnetDesc}}</view>
				</view>
				<view class="btn-box">
					<view class="btn">
						<view class="cencel" @click="handleClosePop">取消</view>
						<view class="confirm" @click="handleConfirm">{{props.ok}}</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script lang="ts" setup>
	const props = defineProps({
		show: Boolean,
		title: String,
		content: String,
		contnetDesc: {
			default: '',
			type: String
		},
		ok: String
	})

	const emit = defineEmits(['handleClosePop', 'handleConfirm'])
	const handleClosePop = () => emit('handleClosePop', false)
	const handleConfirm = () => emit('handleConfirm', true)
</script>

<style lang="scss" scoped>
	.content {
		// width: 496rpx;
		position: relative;

		.top-box {
			display: flex;
			align-items: center;
			justify-content: center;

			.title-box {
				display: flex;
				justify-content: space-between;
				padding-top: 24rpx;

				.close {
					position: absolute;
					top: 24rpx;
					right: 24rpx;
				}

				.title {
					opacity: 1;
					/** 文本1 */
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 16.46px;
					color: rgba(0, 0, 0, 1);
					text-align: left;
				}
			}
		}

		.content-main {
			display: flex;
			justify-content: center;
			flex-direction: column;
			padding: 24rpx 80rpx 0 80rpx;

			.content-one {
				padding-top: 56rpx;
				opacity: 1;
				/** 文本1 */
				font-size: 14px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 19.21px;
				color: rgba(153, 153, 153, 1);
				text-align: center;
			}

			.content-desc {
				opacity: 1;
				/** 文本1 */
				font-size: 10px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 13.72px;
				color: rgba(153, 153, 153, 1);

			}
		}

		.btn-box {
			padding-top: 64rpx;

			.btn {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.cencel,
				.confirm {
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 32rpx 0rpx;
					width: 50%;

					opacity: 1;
					/** 文本1 */
					font-size: 12px;
					font-weight: 400;
					letter-spacing: 0px;
					line-height: 16.46px;
				}

				.cencel {
					border-top: 1rpx solid #d4d4d4;
					color: rgba(153, 153, 153, 1);
				}

				.confirm {
					background-color: #4575f6;
					color: rgba(255, 255, 255, 1);
				}
			}
		}
	}
</style>